<template>
  <div class="page white-stage">
    <div class="order-audition-main">
      <group class="no-margin">
        <datetime title="预约时间" v-model="orderAudition.will_attend_time" placeholder="请选择预约时间"></datetime>
        <selector direction="rtl" title="预约方式" placeholder="选择预约方式" :options="orderways" v-model="orderAudition.will_attend_type" placeholder-align="right"></selector>
        <cell direction="rtl" title="接待人" placeholder="请选择接待人" :options="receiver" v-model="orderAudition.assist_user" placeholder-align="right" @click.native="onItemClick"></cell>
        <x-input direction="rtl" title="预估成交金额" placeholder="填写预估成交金额" :options="amounts" v-model="orderAudition.estimate_amount" placeholder-align="right" ></x-input>
      </group>
      <div class="btn-group">
        <span class="btn save-btn" @click="saveAppointments">保存</span>
      </div>
    </div>
    <popup v-model="show" @on-hide="handlePopup('hide')" @on-show="handlePopup('show')" height="100%">
      <div class="popup0" v-if="show === true">

      <div :style="containerHeight" @click="hidePopup">
        <scroller style="top:44px" class="pdscroll" :class="{'none':!teamsMembers.length}" :on-infinite="loadMember" :on-refresh="refreshMember" ref="team_scroller" :noDataText="tnoDataText">
          <team-member-item @on-click="memberSelect" v-for="(teamMemberItem, index) in teamsMembers" :key="index" :client="teamMemberItem"></team-member-item>
        </scroller>
      </div>
      </div>
    </popup>
  </div>
</template>

<script>
  import Vue from 'vue'
  import clientMenu from '../components/client-menu'
  import {XInput, Group, ChinaAddressData, XAddress, Selector, Datetime, Cell} from 'vux'
  import store from '../store'
  import Scroller from 'vue-scroller'
  import {Popup} from 'vux'
  import teamMemberItem from '../components/team-member-item'

  export default{
    data () {
      return {
        containerHeight : 'height:'+document.body.scrollHeight+'px;',
        default:{
          ordertime: '',
          orderwayValue: '',
          receiverValue: '',
          amountValue: '',
        },
        teamsMembers: [],
        page_size: 5,
        tnoDataText:'',
        team_page_index: 1,
        show: false,
        babies:[],
        addressData : ChinaAddressData,
        orderAudition:{
          "custom_id": "0",
          "assist_suid": "0",
          "will_attend_type": "WX#",
          "will_attend_time": "2017-01-01",
          "estimate_amount": "0.00",
          "assist_user" : '',
          "assist_suid" : ''
        },
        // clientSourceValue: '',
        // industryValue: '',
        // orderAuditionGenderValue: '',

        orderways: [
          {
            key : 'WX#',
            value: '微信'
          },
          {
            key : 'XX#',
            value: '线下'
          }
        ],

        receiver : [

        {
          key: '0',
          value:'林丽亲'
        },

        {
          key:'1',
          value:'李美英'}
        ],

        amounts : [

        {
          key: '0',
          value:'100'
        },

        {
          key:'1',
          value:'50'
        }
        ]
      }
    },
    components:{
      XInput,
      Group,
      ChinaAddressData,
      XAddress,
      Selector,
      Datetime,
      Cell,
      Scroller,
      Popup,
      teamMemberItem
    },
    methods: {
      refresh (iscroll) {
        console.log('refresh')
      // Refresh current data
      },

      log () {
        console.log('ee');
      },

      load (iscroll) {
        console.log('load')
      // Load new data
      },

      test () {
        console.log('test')
      },

      memberSelect(member) {
        console.log('memberSelect: ', member.suid);
        this.setAssist(member)
        this.show = false;
      },


      loadMember(iscroll) {
        console.log('loadMember')
        // this.loadMembers();
        // Load new data
      },

      refreshMember(iscroll) {
        console.log('refreshMember')
      },

      hidePopup() {
        this.show = false;
        console.log('hidePopup')
      },

      onBlur () {

      },

      onShow () {
        console.log(arguments)
      },

      addorderAudition () {
        this.babies.push(this.default)
      },

      handlePopup(status) {

        if (status === 'show') {
        } else {
        }
      },

      onItemClick(clientID) {
        this.loadMembers();
        this.show = true;
        this.selectedClientId = clientID;
        console.log('clientID: ', clientID);
      },

      saveAppointments() {
        let that = this;
        console.log('this.orderAudition',this.orderAudition)
        // alert('预约试听成功!');
        // this.$router.back();
        store.dispatch('saveAppointments', this.orderAudition)
          .then(function(response){
            if(response.data.errcode == 0 ) {
              alert('预约试听成功!');
              that.$router.back();
            } else {
              alert('系统错误！请联系管理员!');
            }
        })
      },

      loadMembers() {

        let that = this;
        let params = {
          page_index: this.team_page_index,
          page_size: this.page_size
        };

        store.dispatch('getTeams', params).then((response) => {

          setTimeout(() => {
            console.log(typeof response.data.results.teams === 'undefined')
            if (typeof response.data.results.teams !== 'undefined') {
              let teams = response.data.results.teams;
              that.filterUserFromTeam(teams);
            } else {
              console.log(that.teamsMembers)
            }

            if (that.$refs.team_scroller) {
              that.$refs.team_scroller.finishInfinite(true);
              that.$refs.team_scroller.finishPullToRefresh();
              if (that.teamsMembers.length > 0) {
                that.tnoDataText = ''
              }
            }

            that.team_page_index++;

          }, 800)

          if(that.teamsMembers.length) {
            that.tnoDataText = '';
          }
          console.debug(that.$refs, 'this.$refs.iscroll.refresh');

        });
      },
      //从接口中筛选出团队信息
      filterUserFromTeam(teams) {
        let temps = [];

        teams.forEach((team, index) => {
          team.team_members.forEach((member, mindex) => {
            member.team_name = team.team_name;
            temps.push(member);
          });
        });
        this.teamsMembers = this.teamsMembers.concat(temps);
        console.log(this.team_page_index === 1, 'this.page_index', this.team_page_index)
        if(this.team_page_index === 1 && this.teamsMembers.length > 0) {
          console.log('------')
          this.setAssist(this.teamsMembers[0])
        }
        console.log('this.teamsMembers', JSON.stringify(this.teamsMembers));
      },
      setAssist (memeber) {
        this.orderAudition.assist_user = memeber.name;
        this.orderAudition.assist_suid = memeber.ding_user_id;
      }
    },

    watch:{
      ordertimeValue(value){
        this.orderAudition.ordertime = value;
      },
      orderwayValue(value){
        this.orderAudition.orderway = value;
      },
      receiverValue(value){
        this.orderAudition.receiver = value;
      },
      amountValue(value){
        this.orderAudition.amount = value;
      },
    },

    computed:{
      loginUser () {
        return this.$store.state.app.user;
      }
    },

    mounted () {
      let query = this.$route.query;
      this.orderAudition.custom_id = query.id;
      // this.orderAudition.assist_suid = this.loginUser.ding_user_id;
      this.loadMembers()
      this.callJsApi('biz.navigation.setTitle',{title:'约试听'});
      this.addorderAudition();
    },


  }
</script>

<style lang='less'>
  @import "../less/index.less";

  .order-audition-main{

  .no-margin{
     &>*{
     margin: 0
     }
  }

  .add-new-btn{
    width: 60%;
  }

  .btn-group{
    margin-top: 15px;

    &>*{
    width: 80%;
    text-align: center;
    border-radius: 4px;
    padding: 10px;
    margin: 0 auto;
    border: 1px solid rgb(229, 229, 229);
    background-color: white;
    color:#23B2E2;
    display: block;
    }

    .pull-left{
    float: left;
    }

    .pull-right{
    float: right;
    }
  }

  }
</style>
